<template>
  <div class="chart-container">
    <div class="chart-title">舆情情感占比</div>
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'SentimentDistribution',
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['40%', '50%'],
          data: [
            { value: 40744, name: '正面', itemStyle: { color: '#91cc75' } },
            { value: 10688, name: '负面', itemStyle: { color: '#ee6666' } },
            { value: 64650, name: '中性', itemStyle: { color: '#5470c6' } }
          ],
          label: {
            color: '#fff'
          }
        }]
      }
      
      this.chart.setOption(option)
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-container {
  background: rgba(255, 255, 255, 0.1);
  padding: 10px;
  border-radius: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .chart-title {
    font-size: 16px;
    margin-bottom: 10px;
    flex: 0 0 auto;
  }
  
  .chart {
    flex: 1;
    min-height: 0;
  }
}
</style> 